<template>
  <div class="address-card">
    <el-dialog
      :model-value="true"
      width="40%"
      align-center
      :close-on-click-modal="true"
      :close-on-press-escape="false"
      @close="closeDialog"
    >
      <div class="address-dialog">
        <div class="dialog-header">
          <h2 class="title">政策百科全书</h2>
          <!-- <img class="logo" src="@/assets/image/tc_logo.png" /> -->
          <!-- <div class="empty-box"></div>
          <div class="close-btn" @click="closeDialog">
            <el-icon><Close /></el-icon>
          </div> -->
        </div>
        <div class="dialog-main">
          <!-- <p style="margin-bottom:10px"> -->
            <p style="text-indent: 2ch;">尊敬的用户：您好！感谢成为透策会员，请在选择推荐的政策资讯范围后，再开始体验平台服务。</p>
            <p style="text-indent: 2ch;">推荐规则如下：选择“马栏山视频文创园”会推荐覆盖“全国、湖南省、长沙市、开福区、马栏山视频文创园”的政策资讯；选择“长沙市”会推荐覆盖“全国、湖南省、长沙市、长沙市下属区县、园区”的政策资讯，以此类推。</p>
            <p style="text-indent: 2ch;">请您根据实际需求选择，一旦选定，需间隔一定时间才可修改，谢谢。</p>
          <div style="display:flex;justify-content:center;align-items: center;">
            <el-form style="margin-top:10px;width:490px;" :model="form">
            <el-form-item label="" prop="account">
              <el-cascader
                class="w-full"
                placeholder="请选择区域"
                clearable
                :options="searchStore.addressTree"
                :props="{ checkStrictly: true, value: 'id' }"
                @change="addressChange"
                filterable
              >
                <template #default="{ node, data }">
                  <div class="flex justify-between items-center">
                    <span :class="data.disabled ? 'text-gray-400' : ''">
                      {{ data.label }}
                    </span>
                    <svg-icon
                      v-if="data.disabled && data.label !== '全国'"
                      @click="jumpVipPage"
                      name="vip"
                      size="20px"
                    />
                  </div>
                </template>
              </el-cascader>
            </el-form-item>
          </el-form>
          <div class="address-btn">
            <el-button
              type="primary"
              @click="bindAddress"
              :disabled="!auth.updateArea"
              v-loading="bindLoading"
            >
              <template v-if="isLogin">
                {{
                  auth.updateArea ? "绑定地区" : `${nextBindAreaTime} 可换绑`
                }}
              </template>
              <template v-else> 请登陆后再进行地区绑定 </template>
            </el-button>
          </div>
          </div>
          <div
              class="tips"
              v-if="isLogin && jsCookie.get('userID') as any != 150"
            >当前权限<template v-if="userType == '0'">每<span class="text-red-500">两个季度</span></template
              ><template v-else-if="userType == '1'"
                >每<span class="text-red-500">个季度</span></template
              ><template v-else-if="userType == '2'"
                >每<span class="text-red-500">个月</span></template
              >可换绑一次地区
              <p v-if="!auth.updateArea">
                如需换绑还需等待<span class="text-red-500"
                  >{{ moment(nextBindAreaTime).diff(moment(), "days") }}天</span
                >，您可以通过<span
                  @click="router.push({ path: 'vipCenter' })"
                  class="text-yellow-500 cursor-pointer"
                  >提升权限</span
                >来缩短等待时间
              </p>
            </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useSearchStore } from "../../store/search";
import { useUserStore } from "../../store/user";
import { reactive, ref, computed } from "vue";
import { Close, Location } from "@element-plus/icons-vue";
import { closeDialog } from "../../utils/bindAreaDialog";
import { bindAddressForUser } from "../../service/user";
import { sleep } from "../../utils/sleep.js";
import router from "../../router";
import moment from "moment";
import jsCookie from "js-cookie";

const searchStore = useSearchStore();
const userStore: any = useUserStore();

const userType = computed<any>(() => userStore.userInfo.vip);
const nextBindAreaTime = computed<any>(
  () => userStore.userInfo.nextBindAreaTime
);
const auth = computed<any>(() => userStore.auth);

const isLogin = jsCookie.get("token");

const form = reactive({
  parkAreaIds: []
});

const addressChange = (e: any) => {
  if (e) {
    form.parkAreaIds = e;
  } else {
    form.parkAreaIds = [];
  }
};

const bindLoading = ref(false);

const bindAddress = async () => {
  try {
    bindLoading.value = true;
    // bind address
    const res = await bindAddressForUser(form);

    // after the bind address
    await sleep(1000);

    await userStore.getUserInfo();

    if (res.code != 200) {
      return (bindLoading.value = false);
    }

    bindLoading.value = false;

    // close bind address dialog
    closeDialog();

    window.location.reload();
  } catch (error) {
    bindLoading.value = false;
  }
};

const jumpVipPage = () => {
  // close bindAddress dialog
  closeDialog();

  router.push({ path: "vipCenter" });
};
</script>

<style scoped lang="postcss">
.address-card {
  :deep(.el-dialog) {
    @apply rounded-md;
    padding: 0;
    .el-dialog__header {
      @apply hidden;

    }
    .el-dialog__body {
      /* @apply p-2 pb-4; */
    }
    .address-dialog {

      .mi-captcha-radar-logo {
        @apply hidden;
      }
      .dialog-header {
        @apply relative flex;
        /* height: 50px; */
        padding: 0 10px;
        height:50px;
        background: linear-gradient(90deg, #00afed 0%, rgba(0, 216, 247, 0)100%);
        border-radius: 0.375rem 0;
        .logo {
          width: 150px;
          height:40px;
          margin:auto;
        }
        .title {
          @apply font-bold flex-1 ;
          font-size: 18px;
          line-height: 50px;
          /* text-align: right; */
          color: #ffff;
        }
        .empty-box {
          width: 100px;
        }
        .close-btn {
          @apply absolute -right-4 -top-4 bg-white rounded-full flex items-center justify-center cursor-pointer;
          width: 20px;
          height: 20px;
          box-shadow: 0 0 6px 0px #ccc;
        }
      }
      .dialog-main {
        @apply p-5;
        .el-form .el-form-item {
          &:first-child {
            /* @apply mb-10; */
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
        .address-utils {
          @apply flex justify-between items-center mt-1;
          .forget-password {
            @apply text-gray-400 cursor-pointer;
          }
        }
      }
      .address-btn,
      .register-btn {
        @apply mt-2;
        margin-left: 5px;
        .el-button {
        }
      }
      .register-btn {
        @apply mt-7;
      }
      .change-model {
        @apply mt-6 text-theme-color text-right cursor-pointer;
      }
    }

    .tips {
      @apply w-full text-center mt-3 mb-3;
    }
  }
}
</style>
